﻿@using NetCoreCMS.Framework.Utility
@using System.Collections

@{
    Layout = Constants.AdminLayoutName;
    Title = "Theme Manage";
    SubTitle = "Themes";
}

<link href="/Core.Cms/css/cmsTheme.css" rel="stylesheet" />
<div class="col-md-12">
    <div class="row themeManage">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#themes" data-toggle="tab" aria-expanded="true"> Themes</a>
            </li>
            <li class="">
                <a href="#download" data-toggle="tab"> Download</a>
            </li>
        </ul>
        <div class="tab-content fullHeight widget-layout-container">
            <div class="tab-pane active" id="themes">
                <div class="">
                    <div class="panel panel-default">
                        @*<div class="panel-heading">
                                @SubTitle
                                <div class="pull-right"><a asp-controller="CmsTheme" asp-action="Install" class="btn btn-outline btn-primary btn-xs">Add New</a></div>
                            </div>*@
                        <div class="panel-body">

                            @if(TempData.Keys.Contains("ThemeSuccessMessage"))
                        {
                                <div class="alert alert-success alert-dismissable">
                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    @TempData["ThemeSuccessMessage"] - <a href="/Home/RestartHost">Restart Now</a> <a href="#" class="alert-link"></a>.
                                </div>
                                <script>
                                window.setTimeout(function () {
                                    window.location.href = '/Home/RestartHost';
                                }, 50);
                                </script>
                        }
                            <div class="services">
                                @foreach (var theme in ViewBag.Themes)
                            {
                                    @if (theme.IsActive == false)
                                {
                                        <div class="col-md-3 ">
                                            <div class="panel panel-default themeBox">
                                                <div class="panel-heading">
                                                    <strong>@theme.ThemeName (@theme.Version)</strong>
                                                </div>
                                                <div class="panel-body">
                                                    <figure class="snip1174 navy" style="text-align:center;">
                                                        <img src="/Themes/@theme.ThemeId/Meta/Preview.png" alt="@theme.ThemeName" />
                                                        <figcaption style="width:100%;">
                                                            <p>
                                                                <br />
                                                                @*@theme.Description
                                                                    <br /><br />*@
                                                                <strong>Categories</strong><br />
                                                                @theme.Category<br /><br />
                                                                <i>Author: @theme.Author</i>
                                                                <br /><br />
                                                            </p>
                                                        </figcaption>
                                                    </figure>
                                                </div>
                                                <div class="panel-footer">
                                                    <div>
                                                        <a class="btn btn-success btn-outline btn-sm" asp-controller="CmsTheme" asp-action="Activate" asp-route-themeId="@theme.ThemeId">Activate</a>
                                                        <a class="btn btn-info btn-outline btn-sm" href="#">Upgrade</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                }
                                else
                                {
                                    var themeSettings = theme.ThemeName + "Theme";
                                        <div class="col-md-3">
                                            <div class="panel panel-default themeBoxActive">
                                                <div class="panel-heading">
                                                    <strong style="color:#fff;">@theme.ThemeName (@theme.Version)</strong>
                                                </div>
                                                <div class="panel-body" style="">
                                                    <figure class="snip1174 active" style="text-align:center;">
                                                        <img src="/Themes/@theme.ThemeId/Meta/Preview.png" alt="@theme.ThemeName" />
                                                        <figcaption style="width:100%;">
                                                            <p>
                                                                <br />
                                                                <strong>Categories</strong><br />
                                                                @theme.Category<br /><br />
                                                                <i>Author: @theme.Author</i>
                                                                <br /><br />
                                                            </p>
                                                        </figcaption>
                                                    </figure>
                                                </div>
                                                <div class="panel-footer">
                                                    <strong>Activated</strong> |
                                                    <a href="/@themeSettings/" class="" style="color:#FFF; font-weight:bold;">Settings</a>
                                                </div>
                                            </div>
                                        </div>
                                }
                            }
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="download">
                <div class="">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            @*
                                Ajax List show

                                Already Installed
                                Update
                                Download
                            *@
                            <table id="themeGalleryOnline" class="table table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Module</th>
                                        <th>Version</th>
                                        <th>Category</th>
                                        <th>Author</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- /.panel -->
        </div>
    </div>
</div>


@section Scripts{
    <link href="~/lib/DataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="~/lib/DataTables/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="~/lib/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/lib/DataTables/dataTables.bootstrap.min.js"></script>
    <script>
            $.ajax({
                method: 'GET',
                url: '/CmsTheme/GetMatGalleryThemes',
                data: { key: "" },
                success: function (rsp) {
                    //console.log(rsp);
                    if (rsp.isSuccess == true) {
                        rsp.data.forEach(function (item, index) {
                            //console.log(item);
                            $('#themeGalleryOnline').append(
                                "<tr>" +
                                "   <td><b>" + item.themeName + "</b><br/>" + item.description + "</td>" +
                                "   <td>" + item.version + "</td>" +
                                "   <td>" + item.category + "</td>" +
                                "   <td><a href='" + item.website + "' target='_blank'>" + item.author + "</td>" +
                                "   <td>" + "<input type='button' class='btn btn-success btn-xs btn-outline' value='Download' onclick='downloadModule(\"" + item.themeId + "\",\"" + item.themeName + "\")' />" + "</td>" +
                                "</tr >"
                            );
                        });
                    }
                    else {
                        NccGlobalAlert.ShowError(rsp.message);
                    }
                },
                error: function (rsp) {
                    //NccPageMask.HideLoadingMask();
                    NccGlobalAlert.ShowError("Error occoured. Please try again after refresh the page.");
                }
            });

            function downloadModule(moduleId, moduleName) {
                NccPageMask.ShowLoadingMask();
                $.ajax({
                    method: 'POST',
                    url: '/CmsTheme/DownloadTheme',
                    data: { themeId: themeId, themeName: themeName },
                    success: function (rsp) {
                        NccPageMask.HideLoadingMask();
                        console.log(rsp);
                        if (rsp.isSuccess == true)
                            NccGlobalAlert.ShowSuccess(rsp.message);
                        else
                            NccGlobalAlert.ShowError(rsp.message);
                    },
                    error: function (rsp) {
                        NccPageMask.HideLoadingMask();
                        NccGlobalAlert.ShowError("Error occoured. Please try again after refresh the page.");
                    }
                });
                //NccGlobalAlert.ShowError(moduleId);
                NccPageMask.HideLoadingMask();

            }
    </script>
}
